<template>
	<b-layout-index>
		<navbar is-style="light" :bgcolor="color.primary" :title="$t('订单中心')"></navbar>

		<view class="order-detail font-size-12" :style="{ '--colorPrimary': color.primary }">


			<view class="payment-status  font-size-12">
				<uni-icons type="clock" size="24" color="#fff" />
				<view class="status">{{$t(stateList[info.order.status])}}</view>
<!-- 				<view class="countdown">{{$t("需支付")}}：￥{{info.order.paymentAmount}}</view> -->
			</view>

			<view class="content">
				<view class="address-card mg-top-10" v-if="info.order.cloudType==0">

				
					<view class="address-card-find" >
						<view class="location-icon">

							<iconfont color="#333" size="30" icon="icon-weizhi" />
						</view>
						<view class="address-info">
							<view class="contact">{{info.address.name}} {{info.address.phoneNumber}}</view>
							<view class="address">{{info.address.address}} {{info.address.addressInfo}}</view>
						</view>
					</view>


					<view>
						<view class="delivery-card">
							<view class="delivery-title">{{$t("发货方式")}}</view>
							<view class="delivery-value">{{info.order.isShop==1?$t("门店取货"):$t("快递配送")}}</view>
						</view>
					</view>
				</view>



				<view class="order-info">
					<view class="section-title">{{$t("订单信息")}}</view>
					<view class="info-item">
						<text>{{$t("订单编号")}}：</text>
						<text class="ltr">{{info.order.sn}}</text>
						<view class="copy-btn">{{$t("复制")}}</view>
					</view>
					<view class="info-item">
						<text>{{$t("下单时间")}}：</text>
						<text class="ltr">{{info.order.createDate | date('yyyy-mm-dd h:M')}}</text>
					</view>
					<view class="info-item">
						<text>{{$t("支付方式")}}：</text>
						<text>{{$t("微信支付")}}</text>
					</view>
				</view>

				<view class="product-info">
					<view class="section-title">{{$t("商品信息")}}</view>
					<view class="product-card" v-for="(item,index) in info.details">
						<!-- 	<view class="company">{{item.goodsName}}</view> -->
						<view class="product-detail">
							<image class="product-image" :src="item.image" mode="aspectFill" />
							<view class="product-content">
								<view class="product-name">{{item.goodsName}}</view>
								<view class="product-spec">{{$t("数量")}}：x{{item.quantity}}</view>
								<view class="product-price">
									<text class="quantity">x{{item.quantity}}</text>
							<!-- 		<text class="price">￥{{item.paymentAmount}}</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="price-detail">
	
					<view class="price-item">
						<text>{{$t("运费")}}</text>
						<text>￥0.00</text>
					</view>
	
				</view>
			</view>
		</view>
	</b-layout-index>
</template>

<script>
	import {
		getQrcode
	} from '../../../../api/agent'
	import {
		findByCloudOrderMyInfo
	} from '../../../../api/order'

	export default {
		data() {
			return {
				id: 0,
				stateList: {
			0: "发货中",
			2: "配送中",
			3: "未付款",
			4: "完成"
				},
				info: {
					order: {
						id: 0,
						status: -1,
						paymentAmount: 0,
						isShop: 0,
						sn: "",
						totalAmount: 0,
						createDate: new Date().getTime()
					},
					details: []
				},
				qrcode: ""
			}
		},
		mounted: (options) => {
			console.log("OPTIONS:", options)
		},
		onLoad: function(options) {
			//	this.id = options.id;
			console.log("OPTIONS1:", options.id)
			this.getInfo(options)
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getInfo({
				id
			}) {
				console.log(id)
				var the = this;
				findByCloudOrderMyInfo(id).then(res => {
					console.log(res)
					the.info = res;
					if (res.order.isShop == 1) {
						the.crateImage()
					}
				})
			},
			openMap: function() {
				var lat = this.info.address.latitude
				var lon = this.info.address.longitude
				console.log("OpenMap:----")
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 18
				})
			},
			crateImage: function() {
				var the = this;
				var url = "page/usercenter/pages/order/show?id=" + the.info.order.id
				getQrcode(url).then(res => {
					console.log(res)
					the.qrcode = "data:image/bmp;base64," + res;
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.order-detail {
		min-height: 100%;

	}

	.nav-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		color: #fff;
	}

	.nav-bar .left {
		width: 80rpx;
	}

	.nav-bar .title {
		flex: 1;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
	}

	.nav-bar .right {
		width: 120rpx;
		display: flex;
		justify-content: space-between;
	}

	.payment-status {
		padding: 40rpx;
		text-align: center;
		color: #fff;
		background-color: var(--color-primary);
	}

	.payment-status .status {
		font-size: 16px;
		font-weight: 500;
		margin: 20rpx 0;
	}

	.payment-status .countdown {
		font-size: 12px;
	}

	.content {
		padding: 0 10rpx;
	}

	.address-card {

		background: #fff;
		padding: 15rpx;
		border-radius: 12px;
		margin-bottom: 20rpx;
	}

	.location-icon {
		margin-right: 20rpx;
		margin-top: 6rpx;
	}

	.address-info .contact {
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.address-info {
		text-indent: 10px;
	}

	.address-info .address {
		font-size: 12px;
		color: #666;
		line-height: 1.4;
	}

	.address-card-find {
		display: flex;
	}

	.delivery-card {
		display: flex;
		justify-content: space-between;

		margin-bottom: 20rpx;
		border-top: #ccc 1px dashed;
		margin-top: 10px;
		padding-top: 10px;
	}

	.delivery-title {
		font-size: 12px;
		color: #333;
	}

	.delivery-value {
		font-size: 12px;
		color: #666;
	}

	.section-title {
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.order-info {
		background: #fff;
		padding: 30rpx;
		border-radius: 12px;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 12px;
		color: #666;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.copy-btn {
		margin-left: 20rpx;
		color: #ff4444;
		font-size: 10px;
	}

	.product-info {
		background: #fff;
		padding: 30rpx;
		border-radius: 12px;
		margin-bottom: 20rpx;
	}

	.company {
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.product-card {
		background: #fff;
	}

	.product-detail {
		display: flex;
		gap: 10;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8px;
		margin-right: 20rpx;

	}

	.product-content {
		flex: 1;
		text-indent: 10px;
	}

	.product-name {
		font-size: 12px;
		margin-bottom: 10rpx;
	}

	.product-spec {
		font-size: 12px;
		color: #999;
		margin-bottom: 20rpx;
	}

	.product-price {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}

	.price-detail {
		background: #fff;
		padding: 30rpx;
		border-radius: 12px;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
		font-size: 12px;
		color: #666;
	}

	.total-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #666;
		border-top: 1px solid #f5f5f5;
	}

	.amount {
		font-size: 18px;
		font-weight: 500;
		color: #ff4444;


	}

	.logoUrl {
		width: 50px;
		height: 50px;
	}

	.qrcode {
		width: 200px;
	}
</style>